<template>
	<div class="text_group">
		<!-- 组件结构 -->

		<!-- 组件容器 -->
		<div class="input_group">
			<!-- 输入框 -->
			<input :type="type" :value="value" @input="$emit('input',$event.target.value)" :placeholder="placeholder" :name="name">
			<!-- 输入框后面的按钮 -->
			<button v-if="btnTitle" :style="styleMy" :disabled="disabled" @click="$emit('btnClick')">{{btnTitle}}</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "inputGroup",
		data() {
			return {
				styleMy: {
					'background-image':'',
				}
			}
		},
		watch: {
			show_or_hidden_eye:{
				deep:true,
				handler(newValue){
					this.$set(this.styleMy, 'background-image', `url(${newValue})`);
				}
			},
		},
		props: {
			type: {
				type: String,
			},
			value: String,
			placeholder: String,
			name: String,
			btnTitle: String,
			disabled: Boolean,
			error: String,
			show_or_hidden_eye: String,
		},
	}
</script>

<style scoped>
	.input_group {
		border: 2px solid #ccc;
		border-radius: 8px;
		padding: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.input_group input {
		height: 100%;
		width: 80%;
		padding: 10px;
		outline: none;
		border: none;
		font-size: 30px;
	}

	.input_group button {
		width: 80px;
		height: 50px;
		border: none;
		outline: none;
		background-size: 80%;
		background-position: 5px;
		background-color: #FFFFFF;
		background-image: url(/img/xianshi.1091f479.png);
		background-repeat: no-repeat;
	}

	.input_group button[disabled] {
		color: #aaa;
	}

	.is-invalid {
		border: 2px solid red;
	}

	.invakid-feedback {
		color: red;
		padding-top: 10px;
	}
</style>
